<template>
  <div class="demo-wrapper">
    <span>头像</span>
    <hr />

    <upload-file
      @before-formData="beforeFormData"
      @uploadedSuccess="uploadedSuccess"
      @uploadedError="uploadedError"
      :beforeUpload="beforeUpload"
    >
      <!-- 通过插槽处理一下图片预览效果 要获取成功上传之后的图片地址-->
      <template #success="dataProps">
        <h1>{{ dataProps.fileData?.filePath }}</h1>
        <img :src="dataProps.fileData?.filePath" />
      </template>
    </upload-file>

    <!-- <devin-form @submit="onSubmit">
      <devin-input :rules="emailRules" v-model="textVal"></devin-input>
      <template #submit>
        <button>测试按钮</button>
      </template>
    </devin-form> -->
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs } from 'vue'
// import DemoInput from './components/demo-input.vue'
// import DevinInput from './form/devin-form-item.vue'
// import DevinForm from './form/devin-form.vue'
import UploadFile from './upload/uploader.vue'
import axios from 'axios'
export default defineComponent({
  components: {
    // DevinInput,
    // DevinForm,
    UploadFile
  },
  setup() {
    const action = ref('http://localhost:3000/api/uploadImg')
    const inputRef = reactive({
      textVal: '',
      emailVal: '',
      numVal: ''
    })
    const textRules = [
      { type: 'required', message: '文本不能为空' },
      { type: 'text', message: '请输入文本' }
    ]
    const emailRules = [
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的邮箱格式' }
    ]
    const numRules = [
      { type: 'required', message: '数字不能为空' },
      { type: 'number', message: '请输入数字' }
    ]

    const onSubmit = (res) => {
      console.log('onSubmit最终结果:', res)
      if (res) {
        // http请求，提交给后台数据
      }
    }
    const onUploadSubmit = (res) => {
      console.log('res', res)
    }

    // 校验钩子函数
    const beforeUpload = (file) => {
      console.log('file---类型教研', file.type === 'image/jpeg')
      let isTrue = false
      if (file.type === 'image/jpeg') {
        isTrue = true
      } else {
        alert('请输入符合的图片格式')
      }
      return isTrue
    }

    // 上传成功之后，获取数据
    const uploadedSuccess = (res) => {
      console.log('res', res)
    }
    // 上传失败之后之后，处理数据
    const uploadedError = (error) => {
      console.log('error')
    }
    // 用户不传递action自己定义上次行为
    const beforeFormData = (formData) => {
      axios
        .post(action.value, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then((res) => {
          console.log('rse:', res)
        })
    }

    const { textVal, emailVal, numVal } = toRefs(inputRef)
    return {
      action,
      textVal,
      emailVal,
      numVal,
      textRules,
      emailRules,
      numRules,
      onSubmit,
      onUploadSubmit,
      beforeUpload,
      uploadedSuccess,
      uploadedError,
      beforeFormData
    }
  }
})
</script>
<style lang="scss">
.form-label {
  font-size: 20px;
}
.form-control {
  margin: 10px;
  width: 90%;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 4px;
}
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
.btn {
  padding: 5px 5px;
  font-size: 20px;
  border-radius: 4px;
}
</style>
